<template>
  <footer class="todo-footer">
    <p class="app-info">
      {{ appName }} v{{ version }}
    </p>
    <p class="copyright">
      使用 <span class="vue-text">Vue.js</span> 构建 | 数据存储于本地
    </p>
    <div class="repo-links">
      <a href="https://gitee.com/LynLuc/todolist-vue3" target="_blank" class="repo-link">
        <span class="repo-icon">📁</span> 源码仓库
      </a>
      <span class="divider">|</span>
      <a href="https://gitee.com/LynLuc/todolist-vue3" target="_blank" class="repo-link">
        <span class="repo-icon">📁</span> Repository
      </a>
    </div>
    <div class="actions">
      <button @click="$emit('clear-all')" class="clear-all-button">
        清空所有任务
      </button>
    </div>
  </footer>
</template>

<script setup>
// 定义props
const props = defineProps({
  appName: {
    type: String,
    default: 'TodoList'
  },
  version: {
    type: String,
    default: '1.0.0'
  }
});

// 定义事件
defineEmits(['clear-all']);
</script>

<style scoped>
.todo-footer {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid #eee;
  text-align: center;
  color: #999;
  font-size: 13px;
}

.app-info {
  font-weight: 600;
  color: #41b883;
  margin-bottom: 5px;
}

.copyright {
  margin-bottom: 5px;
}

.repo-links {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 15px;
}

.repo-link {
  color: #41b883;
  text-decoration: none;
  transition: color 0.2s;
  display: inline-flex;
  align-items: center;
  font-size: 13px;
}

.repo-icon {
  margin-right: 4px;
  font-size: 14px;
}

.divider {
  margin: 0 10px;
  color: #ddd;
}

.repo-link:hover {
  color: #35495e;
  text-decoration: underline;
}

.vue-text {
  color: #35495e;
  font-weight: 600;
}

.actions {
  margin-top: 15px;
}

.clear-all-button {
  background: none;
  border: 1px solid #ff6b81;
  color: #ff6b81;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.3s;
}

.clear-all-button:hover {
  background-color: #ff6b81;
  color: white;
}
</style> 